<template>
  <!-- 给样式 -->
  <div class="div-asider">
    <!-- <el-menu>：Element UI 提供的菜单组件 -->
    <el-menu
      class="el-menu-vertical-demo"
      style="border-right: 1px;"
    >

    <!-- 无子菜单的菜单项 -->
    <!-- 使用 v-for" 指令对 noChildrenMenus 数组进行遍历，动态生成无嵌套子菜单的菜单项 -->
    <!-- :key="item.path"：为每个菜单项提供唯一的 key，帮助 Vue 高效更新 DOM -->
    <!-- :index="item.path"：设置菜单项的索引，一般用于标识菜单项。 -->
    <!-- @click="() => router.push(item.path)"：当点击菜单项时，使用 Vue Router 的 push 方法导航到对应的路径 -->
    <el-menu-item 
    v-for="item in noChildrenMenus"
    :key="item.path"
    :index="item.path"
    @click="() => router.push(item.path)">
      <!-- <el-icon>：Element UI 的图标组件， -->
      <!-- <component :is="item.icon" /> 动态渲染图标  -->
      <el-icon><component :is="item.icon" /></el-icon>
      <!-- <span>{{ item.title }}</span>：显示菜单项的标题。 -->
      <span>{{ item.title }}</span>
    </el-menu-item>



    <!-- 有子菜单的菜单项 -->
    <el-sub-menu 
    v-for="item in hasChildrenMenus"
    :key="item.path"
    :index="item.path"

    >
    <!-- <template> 为多个元素添加分组 
    <!-- 使用<v-slot>,<template #title>：定义子菜单的标题部分 -->
        <template #title>
          <el-icon><setting /></el-icon>
          <span>{{ item.title }}</span>
        </template>

        <!-- <el-menu-item-group>：对一组菜单项进行分组 -->
        <el-menu-item-group>
          <!-- 内层的 <el-menu-item>：为子菜单中的具体菜单项，同样使用 v-for 指令遍历 item.children 数组 -->
          <el-menu-item 
          v-for="subItem in item.children"
          :key="subItem.path"
          :index="subItem.path"
          @click="() => router.push(subItem.path)"
          >
          <el-icon><component :is="subItem.icon" /></el-icon>
          <span>{{ subItem.title }}</span>


          </el-menu-item>
        </el-menu-item-group>

      </el-sub-menu>
    </el-menu>

  </div>
  
</template>
  

<script setup>
// 引入函数
import { computed, ref } from 'vue'
import {useRouter,useRoute} from 'vue-router'
// 引入用户状态管理的存储模块
import {useUserStore} from '@/stores/userStores'

// 获取用户状态管理的实例
const userStrore = useUserStore()


// js 函数形式 跳转 
const router = useRouter()// 获取路由实例，用于路由跳转
const route = useRoute()// 获取当前路由信息

// 获取用户信息并打印到控制台
const userInfo = userStrore.getUserInfo()
console.log(userInfo);



// 控制面板 用户管理 图书管理 借阅管理 系统设置
// 使用 ref 定义响应式的菜单数据数组
const menus = ref([{
  title: '控制面板',
  path: '/index',
  icon: 'House'
},
{
  title: '用户管理',
  path: '/user',
  icon: 'User'
},
{
  title: '图书管理',
  path: '/book',
  icon: 'Document'
},
{
  title: '借阅管理',
  path: '',
  icon: 'CreditCard'
},
{
  title: '系统设置',
  path: '',
  children: [
      {title:'设置1',path:'/setting',icon:'Setting'},
      {title:'设置2',path:'/setting',icon:'Setting'}
  ]

}])


//计算属性 computed
//拆分成两个 数据遍历  一个有children 一个没有children
//过滤 filter

const noChildrenMenus = computed(() => 
menus.value.filter(item => !item.children) )
// 通过 computed 定义计算属性，过滤出没有 children 属性的菜单项。

const hasChildrenMenus = computed(() =>
menus.value.filter(item => item.children))
// 通过 computed 定义计算属性，过滤出有 children 属性的菜单项





</script>

<style scoped>
.div-asider{
  width: 200px;
  height: 1000vh;
  
}
</style>